<template>
  <div class='container'>
    <el-card class='box-card'>
      <search-view ref='question-view-component'></search-view>
      <div class='counts'><i class='el-icon-info'></i> 数据一共 {{ questionList.data.counts }} 条</div>

      <my-table
        :table-props='{
            data: questionList.data.items,
            border: false
          }'
        :columns="[
            { label: '试题编号', prop: 'number', width: 180, align: 'center' },
            { label: '学科', prop: 'subject', align: 'center' },
            { label: '目录', prop: 'catalog', align: 'center' },
            // { label: '题型', prop: 'questionType', align: 'center' },
            { label: '题型', slotName: 'questionType', align: 'center' },
            { label: '题干', slotName: 'question', align: 'center' },
            { label: '录入时间', slotName: 'addDate', align: 'center' },
            { label: '难度', slotName: 'difficulty', align: 'center' },
            { label: '录入人', prop: 'creator', align: 'center' },
            { label: '操作', slotName: 'operators', width: 450, align: 'center', fixed: 'right' },
          ]"
        :pagination-props="{
            layout: 'total, ->, prev, pager, next, sizes, jumper',
            total: questionList.data.counts
          }"
        :pagination-events='events'
      >
        <template v-slot:questionType='scope'>
          {{ scope.row.questionType == 1 ? '单选' : (scope.row.questionType == 2 ? '多选' : '简答') }}
        </template>
        <template v-slot:addDate='scope'>
          <div>{{ getTimeString(scope.row.addDate) }}</div>
        </template>
        <template v-slot:difficulty='scope'>
          {{ scope.row.difficulty == 1 ? '简单' : (scope.row.difficulty == 2 ? '一般' : '困难') }}
        </template>
        <template v-slot:question='scope'>
          <div v-html='scope.row.question'></div>
        </template>
        <template v-slot:operators='scope'>
          <el-button type='primary' size='small' @click='onViewClick(scope.row)' circle plain><i class='el-icon-view' />
          </el-button>
          <el-button type='success' size='small' @click='onEditCompany(scope.row)' circle plain><i
            class='el-icon-edit' /></el-button>
          <el-button type='danger' size='small' @click='onDelClick(scope.row)' circle plain><i class='el-icon-delete' />
          </el-button>
          <el-button type='warning' size='small' @click='onCheckClick(scope.row)' circle plain><i
            class='el-icon-check' /></el-button>
        </template>
      </my-table>
    </el-card>
    <!-- 预览弹框 -->
    <el-dialog
      title='题目预览'
      :visible.sync='questionVisible'
      @close='onViewClose'
    >
      <div class='question-container'>
        <div>
          <span>【题型】：</span>
          <span>{{ questionDatail.questionType == 1 ? '单选题' : (questionDatail.questionType == 2 ? '多选题' : '简答') }}</span>
        </div>
        <div>
          <span>【编号】：</span>
          <span>{{ questionDatail.id }}</span>
        </div>
        <div>
          <span>【难度】：</span>
          <span>{{ questionDatail.difficulty == 1 ? '简单' : (questionDatail.difficulty == 2 ? '一般' : '困难') }}</span>
        </div>
        <div>
          <span>【标签】：</span>
          <span>{{ questionDatail.tags }}</span>
        </div>
        <div>
          <span>【学科】：</span>
          <span>{{ questionDatail.subjectName }}</span>
        </div>
        <div>
          <span>【目录】：</span>
          <span>{{ questionDatail.directoryName }}</span>
        </div>
        <div>
          <span>【方向】：</span>
          <span>{{ questionDatail.direction }}</span>
        </div>
      </div>
      <div class='answer'>【题干】：</div>
      <div v-html='questionDatail.answer'></div>
      <!--      选项-->
      <!--      <div class="question-type">-->
      <!--        <div>{{ questionDatail.questionType == 1 ? '单选题': (questionDatail.questionType == 2 ? '多选题' : '简答')}} 选项： (以下选中的选项为正确答案)</div>-->
      <!--        <div v-for="item in questionDatail.options" :key="item.id">-->
      <!--          <input :type="questionDatail.questionType == 1 ? 'radio': (questionDatail.questionType == 2 ? 'checkbox' : 'textarea')" :checked="item.isRight == 1 ? 'checked' : ''" :disabled="item.isRight !== 1 ? 'disabled' : ''"> {{ item.title}}-->
      <!--        </div>-->
      <!--      </div>-->
      <el-form :model='questionFromData' class='question-type'>
        <el-form-item v-if='questionFromData.questionType != 3' label='选项:' required>
          <div v-for='item in questionFromData.options' :key='item.code'>
            <div>
              <el-radio v-if='questionFromData.questionType == 1' v-model='questionFromData.optionCode'
                        :label='item.code'>{{ item.code }}:
              </el-radio>
            </div>
            <div>
              <el-checkbox v-if='questionFromData.questionType == 2' v-model='questionFromData.optionCodes'
                           :label='item.code'>{{ item.code }}:
              </el-checkbox>
            </div>
          </div>
        </el-form-item>
      </el-form>

      <div class='refer-answer'>【参考答案】：
        <el-button type='danger'>视频答案预览</el-button>
      </div>
      <div class='answer-parsing'>
        <div>【答案解析】:</div>
        <div v-html='questionDatail.answer'></div>
      </div>
      <div class='note'>【题目备注】: {{ questionDatail.remarks }}</div>
      <div class='dialog-footer'>
        <el-button @click='onViewClose' type='primary'>关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { provinces, citys } from '@/api/hmmm/citys'
import { direction } from '@/api/hmmm/constants'
import * as questionApi from '@/api/hmmm/questions'
import { delModule } from '@/store/utils/delUtils'
import { getTimeString } from '@/utils/time'
import searchView from '@/module-hmmm/components/searchView'

export default {
  name: 'QuestionList',
  components: {
    searchView
  },
  data () {
    return {
      getTimeString,
      questionFromData: {},
      dengmiQueryForm: {},
      currentPage: {
        page: 1,
        pagesize: 10
      },
      events: {
        'current-change': this.onCurrentPageChange
      },
      companyShow: false,
      companyEditTitle: '',
      questionType: '',

      // 预览弹窗
      questionVisible: false
    }
  },
  computed: {
    ...mapState('questions', ['questionList', 'questionDatail']),
    // ...mapState('subjects', ['subjectList', 'simpleList', 'tagList'])
  },
  methods: {
    ...mapActions('questions', ['updateQuestionList', 'updateQuestionDatail']),
    // ...mapActions('subjects', ['updateSubjectList', 'updateSimpleList', 'updateTagList']),
    onCurrentPageChange (currentPage) {
      this.currentPage.page = currentPage
      this.updateQuestionList(this.currentPage)
    },
    // 搜索
    searchComponent (params) {
      this.updateQuestionList(params)
    },
    // 预览弹框
    async onViewClick (data) {
      this.questionVisible = true
      await this.updateQuestionDatail({
        id: data.id
      })
      this.questionDatail.optionCodes = []
      this.questionDatail.optionCode = ''
      // 遍历选项并赋值
      for (const item of this.questionDatail.options) {
        if (item.isRight === 1) {
          this.questionDatail.optionCode = item.code
          this.questionDatail.optionCodes.push(item.code)
        }
      }
      this.questionFromData = this.questionDatail
    },
    onViewClose () {
      this.questionVisible = false
    },

    // 编辑
    onEditCompany (data) {
      // 跳转路由
      this.$router.push({
        path: 'new',
        query: {
          id: data.id
        }
      })
    },
    // 删除题目
    async onDelClick (data) {
      await delModule(questionApi.remove, '题目', { id: data.id })
      this.updateQuestionList()
    },
    // 加入精选
    onCheckClick (data) {
      this.$confirm('此操作将改题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '加入成功!'
        })
        questionApi.choiceAdd({
          id: data.id,
          choiceState: 1
        })
        this.updateQuestionList(this.currentPage)
      }).catch(() => {
      })
    },

    onChangeNewView () {
      this.$router.push('new')
    }
  },
  created () {
    this.updateQuestionList()
    this.updateSubjectList()
  },
  updated () {
    this.$refs['question-view-component'].componentFn(this.searchComponent)
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  margin: 12px;

  .instructions {
    display: flex;
    justify-content: space-between;
    padding: 4px 20px 20px 8px;

    div {
      color: #ffc5d5;
      font-size: 12px;
    }
  }

  .counts {
    padding: 8px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    background-color: #f4f4f5;
    border-radius: 6px;
    color: #aaa;
  }
}

.el-form-item {
  display: inline-block !important;
}

.el-form-item__label {
  display: none;
  width: 0px !important;

}

.dialog-footer {
  display: flex;
  justify-content: right;
}

.question-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid #aaa;

  div {
    margin: 0 0 16px 0;
  }
}

.answer {
  margin: 8px 0;
}

.question-type {
  border-bottom: 1px solid #aaa;
}

.refer-answer {
  padding: 8px 0;
  border-bottom: 1px solid #aaa;
}

.answer-parsing {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #aaa;

  p {
    margin: 0;
  }

}

.note {
  margin: 8px 0 20px 0;
}


</style>
